<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 300px;
			margin: 100px auto;

		}

		table {
			width: 300px;
			border: 1px solid #eee;
		}

		th,
		td {
			padding: 10px;
			border: 1px solid #eee;
			border-spacing: 0;
		}

		th {
			background: skyblue;
			color: #fff;
		}

		tr {
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="box">
		<table>
			<thead>
				<th>
					<input type="checkbox" class="all">
				</th>
				<th>菜名</th>
				<th>报价</th>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name=""></td>
					<td>红烧肉</td>
					<td>30</td>
				</tr>
				<tr>
					<td><input type="checkbox" name=""></td>
					<td>红烧肉</td>
					<td>30</td>
				</tr>
				<tr>
					<td><input type="checkbox" name=""></td>
					<td>红烧肉</td>
					<td>30</td>
				</tr>
				<tr>
					<td><input type="checkbox" name=""></td>
					<td>红烧肉</td>
					<td>30</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$('.all').click(function () {
			$('tbody input').prop('checked', $(this).prop('checked'))
		})

		$('tbody input').click(function () {
			if($('tbody input').length == $('tbody input:checked').length){
				$('.all').prop('checked',true)
			}else{
				$('.all').prop('checked',false)
			}
		})

	</script>
</body>

</html>